import React from 'react';
import { Collapse } from 'antd';
import { inject, observer } from 'mobx-react';
import  '../../../public/css/delevlop.css';
import { Button } from 'antd';
import {
    NavLink,
} from 'react-router-dom'
const Panel = Collapse.Panel;
function callback(key) {
    console.log(key);
}

@inject('delevlop')
@observer
export default class ApiMenu extends React.Component {
    constructor(props){
        super(props)
        this.state={
            color:{color:'#3e94fe'},
            isMenu:-1,
            isSubMenu:-1,
            interfaceName:'',
            list:1
        }
    }
    componentWillMount() {       
        this.props.delevlop.getMenuList()
    }
    onClickMenu(key){
       if(!key)return;
        this.props.delevlop.getInterfacesByMenu({"menuId":key,"excludeMenuId":""})
    }
    changeColor(j,i,name,id){
        this.setState({
            isMenu:j,
            isSubMenu:i,
            interfaceName:name,
        })
        this.props.delevlop.detailParam.id=id
        this.props.delevlop.getDetail()
    }
    editorClick(){
        if (this.state.list == 1) {//编辑
			this.state.list = 0;
		} else if (this.state.list == 0) {//保存
            this.state.list = 1;
            window.editor.sync();
			var htmls = document.getElementById('editor_id').value; // 原生AP
            htmls = window.encodeURIComponent(htmls);
            this.props.delevlop.updataParam.id=this.state.interfaceId
            this.props.delevlop.updataParam.callDesc=htmls
            this.props.delevlop.updateCall()
        }
        this.setState({
            list:this.state.list
        });

    }
    render(){
        const {menuOne,menuTwo,detail}=this.props.delevlop        
        const htmls = window.decodeURIComponent(detail)
        console.log(detail,123,htmls)
        window.KindEditor.html('#editor_id',htmls)
		if (!window.editor) {
			window.KindEditor.options.filterMode = false;
			window.editor = window.KindEditor.create('#editor_id', {
				items: [
					'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
					'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
					'insertunorderedlist', '|', 'table', 'link']
			});
        }

        return (
            <div style={{'height':'100%','clear':'both'}}>
                <div className='fl'>
                <Collapse onChange={this.onClickMenu.bind(this)} accordion>
                    {menuOne.map((e,i)=>(
                        <Panel header={e.name} key={e.id}>
                            {menuTwo.map((els,j)=>(
                                <p className="menu-text" key={j}><span className="cursor text-active" style={this.state.isMenu==j&&this.state.isSubMenu==i?this.state.color:null} onClick={this.changeColor.bind(this,j,i,els.name,els.id)} key={j}>{els.name}</span></p>
                            ))}
                        </Panel>
                    ))}
                </Collapse>
                </div>
                <div className="fl rightLine"></div>
                <div className={this.state.interfaceName?'p20 userdtl fl pos-abs':'p20 userdtl fl pos-abs hide'} style={{"left":"360px","width":"73%"}}>
                    <div style={{"paddingBottom":"15px","borderBottom":"1px solid #e9e9e9","clear":"both"}}>
                        <span className="fsfw">{this.state.interfaceName}</span>
                        <Button type="primary" className='bgbtn fr' onClick={this.editorClick.bind(this)}>{this.state.list == 0 ? "保存" : "编辑"}</Button>
                    </div>
                    <div className={this.state.list == 1 ? "" : "hide"}>
						<div className="mt-40" dangerouslySetInnerHTML={{ __html: htmls }} ></div>
					</div>
					<div className={this.state.list == 0 ? "mt-40" : "hide"}>
						<textarea id="editor_id" name="content" style={{ "width": "100%", "height": "300px" }}>
						</textarea>
					</div>
                </div>
            </div>
        )
    }
}